<template>
  <div class="header-container">
    <div class="header-left flex-box">
      <el-icon class="icon" size="20" @click="handleCollapse">
        <Fold />
      </el-icon>
      <ul class="flex-box">
        <li v-for="(item, index) in selectMenu" :key="item.path" class="tab flex-box"
            :class="{selected: route.path === (item.meta?.path || item.path)}">
          <el-icon size="12">
            <component :is="item.meta?.icon || item.icon" />
          </el-icon>
          <router-link class="text flex-box" :to="item.meta?.path || item.path">
            {{ item.meta?.name || item.name}}
            </router-link>
          <el-icon size="12" @click="handleClose(item,index)">
            <Close class="close" />
          </el-icon>
        </li>
      </ul>
    </div>

    <div class="header-right flex-box">
      <el-dropdown @command="handleClick">
        <span class="el-dropdown-link flex-box">
          <el-avatar :src="userInfo.avatar" />
          <p class="username">{{ userInfo.name }}</p>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="cancel">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { Fold } from '@element-plus/icons-vue'
import { useStore } from 'vuex';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';


const store = useStore();
const route = useRoute();
const router = useRouter();

const userInfo = JSON.parse(localStorage.getItem('userInfo'))

const selectMenu = computed(() => store.state.menu.selectMenu);
const handleCollapse = () => {
  store.commit('menu/collapseMenu');
  console.log(store.state.menu.isCollapse);
};
const handleClose = (item, index) => {
  store.commit('menu/closeMenu', { item, index });
  if (route.path === (item.meta?.path || item.path)) {
    // 删除非当前页
    const selectMenuData = selectMenu.value;
    // 删除最后一项
    if (index === selectMenuData.length) {
      if (selectMenuData.length >= 1) {
        router.push(selectMenuData[index - 1].meta?.path || selectMenuData[index - 1].path);
      } else {
        router.push('/');
      }
    } else if (index < selectMenuData.length) {
      router.push({
        path: selectMenuData[index].meta?.path || selectMenuData[index].path
      });
    } else {
      router.push('/');
    }
  }
};

const handleClick = (command) => {
  if(command === 'cancel'){
    // 退出登录,清除缓存
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
    localStorage.removeItem('admin');
    window.location.href = window.location.origin;
  }
};
</script>

<style lang="less" scoped>
.flex-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;

  .header-left {
    cursor: pointer;

    .icon {
      vertical-align: middle;
      align-items: center;
      cursor: pointer;
    }

    .icon:hover {
      color: #ffd04b;
    }

    .tab {
      cursor: pointer;
      margin: 0;
      padding: 0 10px;
      height: 100%;
      .text {
        margin: 0 5px;
      }
      .close {
        visibility: hidden;
      }
      &.selected {
        a{
          color: #409EFF;
        }
        i{
          color: #409EFF;
        }
        background-color: #f5f5f5;
      }
    }

    .tab:hover {
      background-color: #f5f5f5;
      .close {
        visibility: inherit;
        cursor: pointer;
        color: #000;
      }
    }



  }

  .header-right {
    margin-left: auto;
    padding: 0 10px;
    border: none;
    cursor: pointer;

    .username {
      margin: 0 10px;
      font-weight: 500;
    }
  }

  a {
    height: 100%;
    color: #333;
    font-size: 15px;
  }

  .el-dropdown-link {
    display: flex;
    align-items: center;
  }
}
</style>